<template>
  <!-- 推广海报页面 -->
  <view class="main">
    <view class="header">
      <image
        src="../../images/circle/back.png"
        mode="aspectFill"
        @tap="back"
      ></image>
      <text>推广海报</text>
      <view class="kong"></view>
    </view>
    <view class="text1" v-if="haibaiData.recommendMoney > 0">
      <view class="t1">长按保存图片 邀好友得现金</view>
      <view class="t2"
        >每成功邀请1名会员，可得{{
          haibaiData.recommendMoney
        }}元收入，多邀多得</view
      >
    </view>
    <view class="text2" v-else>长按保存图片</view>
    <!-- <view class=""> -->
    <!-- <lpainter ref="painter" :board="base"/> -->
    <!-- <lpainter ref="painter" fileType="png" width="622rpx" height="900rpx" v-if="!path"></lpainter>
			<image :src="path" style="width: 622rpx; height: 900rpx;" v-if="path"></image> -->
    <!-- </view> -->
    <!-- <image :src="path" mode="widthFix" style="width: 622rpx; height: 900rpx;"></image>
		<button @click="onRender(base)" type="danger">绘制</button> -->
    <view id="poster" class="haibao">
      <view v-if="!base64">
        <img class="bak" src="../../static/image/haibao_bag.png" />
        <!-- <img class="tou" src="../../images/circle/haibao1.png" ></img>
				<img class="user" :src="userUrl"></img>
				<view class="t1">
					<view style="font-size: 32rpx;font-weight: bold;">{{title}}</view>
					<view style="font-size: 26rpx;margin-top: 10rpx;">已有{{peopleNumber}}位好友加入</view>
				</view>
				<img class="ma" :src="haibaiData.orUrl" mode="aspectFill"></img> -->
        <!-- <view class="t2">长按二维码预览圈子内容</view>
				<view class="t3">丰富商界资源 期待你的加入</view> -->
        <view class="content">
          <img class="name" :src="haibaiData.circleUrl" />
          <view class="title">{{ title }}</view>
          <view class="text">
            {{ content }}
          </view>
          <view class="gang"></view>
          <view class="touxiang">
            <img
              :src="item"
              v-for="(item, index) in haibaiData.userUrlList"
              :key="index"
              class="imgs"
            />
          </view>
          <view class="t1">已有{{ peopleNumber }}位好友加入</view>
          <img class="ma" :src="haibaiData.orUrl" />
          <text class="db"
            >长按二维码开始享用一起来往人脉圈<br />无限商机/人脉，期待为你服务</text
          >
        </view>
      </view>
      <img :src="base64" style="width: 600rpx; height: 1060rpx" v-if="base64" />
    </view>
    <!-- <button type="default" @click="toImg">生成海报</button> -->
  </view>
</template>
		
<script>
import lpainter from "../../module/lime-painter/index.vue";
import html2canvas from "html2canvas";
var jweixin = require("jweixin-module");
export default {
  components: { lpainter },
  data() {
    return {
      num: 50,
      peopleNumber: 0,
      haibaiData: {},
      base: {},
      path: "",
      base64: "",
      id: "",
      title: "",
      userUrl: "",
      orgUrl: "",
      content: "",
      qzDataList: {}, //圈子信息
      encryptUserId: "",
    };
  },
  onLoad(option) {
    this.id = option.id;

    this.user();
    this.ewm();
    this.qzData();
    this.handleShare();
    // uni.showLoading({
    //   title: "海报生成中..."
    // });
    // setTimeout(() => {
    //   uni.hideLoading();
    // },3000);
  },
  onShow() {
    if (uni.getStorageSync("token")) {
      this.encryptUserId = uni.getStorageSync("personal").encryptUserId; //本地id
    }
  },
  computed: {},
  methods: {
    toImg() {
      let that = this;
      // 使页面滑到顶部，避免顶部出现白边
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0,
      });
      var dom = document.getElementById("poster"); // 获取dom元素
      var width = dom.offsetWidth; //dom宽
      var height = dom.offsetHeight; //dom高
      html2canvas(dom, {
        dpi: window.devicePixelRatio * 4,
        scale: 3, // 缩放倍数
        width: width, //dom 原始宽度
        height: height,
        scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
        scrollX: 0,
        useCORS: true, //支持跨域，但好像没什么用
        async: false, //是否异步解析和呈现元素
        letterRendering: true,
      }).then((canvas) => {
        // 将生产的canvas转为base64图片
        that.base64 = canvas.toDataURL("img/png", 1.0);
      });
      uni.hideLoading();
    },
    back() {
      window.history.go(-1);
    },
    // 获取当前用户信息
    user() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/userInformation/getNewOtherBusinessCard?",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          viewUid: "",
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.userUrl = res.data.data.avatarUrl;
        }
      });
    },
    async onRender(base) {
      // 支持通过调用render传入参数
      const painter = this.$refs.painter;
      painter.render(base);
    },
    onCanvasToTempFilePath() {
      const painter = this.$refs.painter;
      let that = this;
      // 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
      painter.canvasToTempFilePath().then((res) => {
        that.path = res.tempFilePath;
        console.log(res.tempFilePath);
      });
    },
    // 圈子基本信息
    qzData() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/orgCircle/friendsHomeInfo",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          orgId: this.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.peopleNumber = res.data.data.peopleNumber;
          this.orgUrl = res.data.data.orgUrl;
          this.qzDataList = res.data.data;
          if (res.data.data.orgName.length > 26) {
            this.title = res.data.data.orgName.substring(0, 26) + "...";
          } else {
            this.title = res.data.data.orgName;
          }
          that.handleShare();
        } else if (res.data.code == 401) {
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    ewm() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/circle/generateCircleQRCode",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          circleId: this.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.haibaiData = res.data.data;
          if (res.data.data.orgIntroduce.length > 58) {
            that.content = res.data.data.orgIntroduce.substring(0, 53) + "...";
          } else {
            that.content = res.data.data.orgIntroduce;
          }
          uni.showLoading({
            title: "海报生成中...",
          });
          setTimeout(() => {
            that.toImg();
          }, 2000);
        }
      });
    },
    handleShare() {
      //分享功能
      let that = this;
      this.request({
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          jweixin.ready(function () {
            // 判断需要跳转的链接

            //是收费圈子
            var linkUrl =
              that.globalData.domain +
              "/pages/circle/Introduce?id=" +
              that.id +
              "&encryptUserId=" +
              encodeURIComponent(that.encryptUserId) +
              "&isShare=1";

            jweixin.updateAppMessageShareData({
              title: that.qzDataList.orgName, //分享标题
              desc: that.qzDataList.orgIntroduce, // 分享描述
              link: linkUrl,
              imgUrl: that.qzDataList.orgUrl, //分享图标
            });
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            jweixin.updateTimelineShareData({
              title: that.qzDataList.orgName, //分享标题
              desc: that.qzDataList.orgIntroduce, // 分享描述
              link: linkUrl, //分享链接
              imgUrl: that.qzDataList.orgUrl, //分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  box-sizing: border-box;
  .header {
    width: 100%;
    height: 106rpx;
    background: #0f6ede;
    font-size: 40rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .kong {
      width: 62rpx;
    }
  }
  .text1 {
    text-align: center;
    margin-top: 52rpx;
    margin-bottom: 40rpx;
    .t1 {
      font-size: 40rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #010101;
      margin-bottom: 10rpx;
    }
    .t2 {
    }
  }
  .text2 {
    text-align: center;
    margin: 72rpx 0 66rpx 0;
    font-size: 40rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #010101;
  }
  .haibao {
    width: 600rpx;
    height: 1060rpx;
    margin-left: 75rpx;
    position: relative;
    box-sizing: border-box;
    .bak {
      width: 600rpx;
      height: 1060rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .content {
      width: 600rpx;
      height: 1060rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      .name {
        width: 200rpx;
        height: 200rpx;
        margin-top: 68rpx;
        margin-bottom: 33rpx;
        border: 1rpx solid #ffffff;
      }
      .title {
        font-size: 34rpx;
        font-family: "宋体";
        font-weight: bolder;
        color: #ffffff;
        margin-bottom: 14rpx;
        line-height: 54rpx;
        padding: 0 50rpx;
        text-align: center;
        letter-spacing: 2rpx;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 1;
        // overflow: hidden;
      }
      .text {
        padding: 0 50rpx;
        font-size: 26rpx;
        font-family: "宋体";
        font-weight: 400;
        text-align: center;
        line-height: 36rpx;
        color: #ffffff;
        word-break: break-all;
        word-warp: break-word;
      }
      .gang {
        width: 40rpx;
        height: 1rpx;
        background-color: #ffffff;
        margin: 45rpx 0;
      }
      .touxiang {
        width: 280rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .imgs {
          width: 80rpx;
          height: 80rpx;
          border: 1rpx solid #ffffff;
          border-radius: 50%;
          margin-right: 19rpx;
        }
      }
      .touxiang .imgs:last-child {
        margin-right: 0;
      }
      .t1 {
        font-size: 26rpx;
        font-family: "宋体";
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        margin-top: 24rpx;
        margin-bottom: 54rpx;
      }
      .ma {
        width: 100rpx;
        height: 100rpx;
      }
      .db {
        font-size: 24rpx;
        font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 32rpx;
        margin-top: 24rpx;
      }
    }
  }
}
</style>
